import { Upload, message, Modal } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { baseURL } from 'utils/request'
import { getToken } from 'utils/storage'
import { useState } from 'react'

// 项目上传图片API接口:
//   http://geek.itheima.net/api-pc.html#u4e0au4f20u56feu72470a3ca20id3du4e0au4f20u56feu72473e203ca3e

// listType='picture-card'  展示图片效果
// <PlusOutlined />         加号图标
export default function Test() {
  const [images, setImages] = useState([
    {
      uid: '-1',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
  ])

  const props = {
    // 文件列表
    fileList: images,
    // 接受上传的文件类型，选择时只展示 .png,.jpg,.jpeg
    accept: '.png,.jpg,.jpeg',
    listType: 'picture-card',
    // maxCount: 3,
    name: 'image',
    action: baseURL + '/v1_0/upload',
    headers: {
      Authorization: `Bearer ${getToken()}`,
    },
    onChange({ file, fileList }) {
      console.log('文件列表发生了变化', { file, fileList })
      // 文件变化(上传，删除，错误)，都需要更新 fileList
      setImages(fileList)
      // 非上传中打印检查数据
      // if (file.status !== 'uploading') {
      //   console.log({ file, fileList })
      // }
      // 上传完成判断
      if (file.status === 'done') {
        message.success(`${file.name} 上传成功.`)
      }
      // 上传失败判断
      else if (file.status === 'error') {
        message.error(`${file.name} 上传失败.`)
      }
    },
    // 上传前的处理
    beforeUpload: (file) => {
      // 可以通过打印 file.type 查看文件类型
      console.log(file.type)
      // 允许上传的格式
      const isAllowType = ['image/png', 'image/jpeg'].includes(file.type)
      // 如果不是允许的格式
      if (!isAllowType) {
        message.error(`${file.name}文件格式不对`)
      }
      // 如果需要阻止列表展现，可以通过返回 Upload.LIST_IGNORE 实现。
      return isAllowType ? true : Upload.LIST_IGNORE
    },
    // 点击预览小眼睛
    onPreview: (file) => {
      // console.log('被点击预览的文件', file)
      // 设置预览图片地址
      setPreviewImage(file.thumbUrl)
    },
  }

  // 预览图片地址
  const [previewImage, setPreviewImage] = useState('')

  return (
    <div>
      <h1>Upload上传的基本使用</h1>
      <Upload {...props}>{images.length < 3 ? <PlusOutlined /> : null}</Upload>
      <Modal
        visible={previewImage !== ''}
        title={'预览图片'}
        footer={null}
        onCancel={() => setPreviewImage('')}
      >
        <img alt='example' style={{ width: '100%' }} src={previewImage} />
      </Modal>
    </div>
  )
}
